<template>
  <ul class="d-upload">
    <li v-for="item in list" :key="item.uuid">
      <slot :scope="item" :event="() => addSelfHandler(item)" />
      <div
        class="d-upload-close"
        v-if="item.path && isEdit"
        @click="() => (item.lonely ? removeSelfHandler(item.uuid) : removeHandler(item.uuid))"
      >
        <el-icon><CircleCloseFilled /></el-icon>
      </div>
    </li>
    <li
      v-if="isEdit"
      class="d-upload-add"
      :class="{ 'no-allow': !isEdit }"
      @click="
        () => {
          isEdit ? addHandler() : '';
        }
      "
      v-show="!isLimit && !isReadOnly"
    >
      <el-icon><Plus /></el-icon>
    </li>
    <UploadModal
      :prefix-data="PRODUCTPRIVATE"
      :limit-number="num - residual"
      :multiple="true"
      :accept="accept"
      v-bind="{ ...uploadOptions }"
      @success="val => (currentDefault.lonely ? successSelfHandle(val) : successHandle(val))"
      v-model:visible="visible"
      v-if="visible"
    />
  </ul>
</template>
<script setup>
import { computed, ref } from "vue";
import UploadModal from "@/components/Upload/UploadModal.vue";
import { generateUUID } from "@/utils";
import { PRODUCTPRIVATE } from "@/constants";
import { useUtils } from "./hooks/useUtils";

const { getAcceptType, deleteFile } = useUtils();
const list = defineModel("list", {
  type: Array,
  default: () => []
});
const visible = ref(false);
const props = defineProps({
  num: {
    type: Number,
    default: 1000
  },
  width: {
    type: Number,
    default: 240
  },
  height: {
    type: Number,
    default: 240
  },
  type: {
    type: Number,
    default: 1
  },
  categorySub: {
    type: String,
    default: ""
  },
  category: {
    type: String,
    default: ""
  },
  accept: {
    type: String,
    default: ""
  },
  isReadOnly: {
    type: Boolean,
    default: false
  },
  isEdit: {
    type: Boolean,
    default: true
  }
});
const currentDefault = ref({});
const uploadOptions = ref({});

const style = computed(() => {
  return {
    width: `${props.width}px`,
    height: `${props.height}px`
  };
});

const residual = computed(() => {
  return list.value.filter(item => item.categorySub === props.categorySub).length || 1;
});
const isLimit = computed(() => {
  return residual.value >= props.num;
});

// 方法

/**单独上传点击 、删除*/
const addSelfHandler = item => {
  uploadOptions.value = {
    "limit-number": 1,
    multiple: false,
    accept: getAcceptType(item.type)
  };
  currentDefault.value = item;
  visible.value = true;
};

const successSelfHandle = val => {
  currentDefault.value.path = val.path;
  currentDefault.value.previewLink = val.previewLink;
};

const removeSelfHandler = uuid => {
  list.value.forEach(itm => {
    if (itm.uuid === uuid) {
      deleteFile(itm.path);
      itm.path = "";
    }
  });
};

/**普通的上传点击 、删除*/
const addHandler = () => {
  uploadOptions.value = {};
  currentDefault.value = {};
  visible.value = true;
};
const successHandle = val => {
  const temp = {
    id: "",
    remark: "",
    category: props.category,
    categorySub: props.categorySub,
    type: props.type,
    path: val.path,
    uuid: generateUUID(),
    previewLink: val.previewLink
  };
  list.value.push(temp);
};
const removeHandler = uuid => {
  list.value = list.value.filter(item => item.uuid !== uuid);
};
</script>
<style lang="scss" scoped>
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.d-upload {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(v-bind("style.width"), 1fr));
  gap: 40px;

  // background: #f5f7fa;

  // overflow: hidden;
  li {
    position: relative;
    width: v-bind("style.width");
    height: v-bind("style.height");
    margin-bottom: 30px;
    border-radius: 4px;
  }
  &-add {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px !important;
    cursor: pointer;
    background: #f5f7fa;
    &:hover {
      border: 1px dashed $primary-color;
    }
  }
  .no-allow {
    cursor: not-allowed;
    background: var(--el-disabled-bg-color);
  }
  &-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
}
</style>
